3D Transformacije u CSS-u

CSS 3D transformacije omogućuju manipulaciju elemenata u trodimenzionalnom prostoru koristeći X, Y i Z osi. Koristeći svojstvo perspective i različite transformacijske funkcije, možemo stvarati realistične dubinske efekte, rotacije i pomake koji dodaju živost web stranicama.

rotateX() Rotacija oko X osi

rotateX() rotira element oko horizontalne osi (gore-dolje). Pozitivne vrijednosti (npr. 45deg) rotiraju element prema gore, stvarajući efekt da se element "naginje" prema vama, dok negativne vrijednosti rotiraju prema dolje. Često se koristi za animacije okretanja karata ili otvaranje vrata.

Hover me
transform: perspective(1000px) rotateX(60deg);
💡 Za 3D efekte je ključno postaviti perspective na roditeljskom elementu ili koristiti funkciju perspective().

rotateY() Rotacija oko Y osi

rotateY() rotira element oko vertikalne osi (lijevo-desno). To je jedna od najčešće korištenih 3D transformacija jer stvara efekt "okretanja karte" (flip effect). Pozitivne vrijednosti rotiraju element udesno (kao da se okreće oko lijeve strane), dok negativne rotiraju ulijevo.

Hover me
transform: perspective(1000px) rotateY(60deg);
💡 Kombiniraj s transform-style: preserve-3d ako imaš ugniježđene elemente u 3D prostoru.

rotateZ() Rotacija oko Z osi

rotateZ() (ili jednostavno rotate()) rotira element oko osi koja gleda prema promatraču. Iako se radi o 3D transformaciji, vizualno izgleda kao 2D rotacija u ravnini ekrana. Koristan je za dinamičke nagibe, shake animacije ili rotacijske efekte koje ne zahtijevaju dubinu.

Hover me
transform: rotateZ(45deg);
/* Isto što i: rotate(45deg) */

translateZ() Pomak po dubini

translateZ() pomiče element prema naprijed ili natrag u prostoru. Pozitivne vrijednosti (npr. 100px) približavaju element prema vama (čineći ga većim), dok negativne udaljavaju (čineći ga manjim). Za razliku od scale(), ovo stvara stvarnu dubinu u 3D prostoru uz perspektivu, a samo promjenu veličine.

Hover me
transform: perspective(500px) translateZ(100px);
💡 Bez postavljene perspective, translateZ neće imati vidljivog efekta osim ako ne koristiš i rotaciju.

scaleZ() Skaliranje dubine

scaleZ() skalira element duž Z osi, što znači da produžava ili skuplja dubinu elementa. Samostalno je teško uočiti jer element po defaultu nema dubinu, ali u kombinaciji s rotacijama (npr. rotateX) stvara efekt "debelog" ili "tanjeg" elementa. Vrijednost 1 je normalno, 2 je dvostruka dubina.

Hover me
transform: perspective(500px) scaleZ(3) rotateX(45deg);

rotate3d() Složena 3D rotacija

rotate3d(x, y, z, angle) omogućuje rotaciju oko proizvoljne osi u prostoru. Prva tri parametra (0-1) definiraju vektor osi rotacije, a četvrti kut. Na primjer, rotate3d(1, 1, 0, 45deg) rotira element oko dijagonale između X i Y osi. Idealan za složene 3D animacije i prijelaze.

Hover me
transform: rotate3d(1, 1, 1, 45deg);
💡 Parametri x, y, z definiraju smjer osi: (1,0,0) = X os, (0,1,0) = Y os, (0,0,1) = Z os.